<template>
  <!-- 橙色背景（浅棕色）+ 黑色细边框 + 白色内边距 -->
  <view style="border: 1rpx solid #000; background-color: #f4a460; padding: 25rpx; margin: 10rpx 0;">
    <!-- 标题：居中、加粗、稍大字体 -->
    <view style="font-size: 34rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;">
      子组件A
    </view>

    <!-- 父组件传值展示：左对齐、默认黑色文字 -->
    <view style="font-size: 28rpx; margin: 20rpx 0; line-height: 1.5;">
      父组件传进来的值: <text style="font-weight: 500;">{{ intent || '空' }}</text>
    </view>

    <!-- 蓝色按钮：宽度适配内容、居中显示 -->
    <view style="display: flex; justify-content: center; margin-top: 20rpx;">
      <button 
        @click="sendDataToB"
        style="background-color: #1e90ff; color: white; padding: 8rpx 25rpx; font-size: 26rpx; border: none; border-radius: 2rpx;"
      >
        传值给CompB组件
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    intent: {
      type: String,
      default: ''
    }
  },
  methods: {
    sendDataToB() {
      // 直接传递父组件传入的值（与示例中"Hello"传递逻辑一致）
      this.$emit('sendToB', this.intent)
    }
  }
}
</script>